<template>
  <div>
    <h2>1. 获取所有图书信息</h2>
    <button @click="getAjax">点击发送网络请求</button>
    <h2>2. 获取指定图书信息</h2>
    <input type="text" placeholder="请输入要查询 的书名" v-model.trim="bookname">
    <button @click="getBook">获取指定图书-控制台看数据</button>
    <h2>3. 新增图书信息</h2>
    <input v-model.trim="bookObj.bookname" type="text" placeholder="书名"><br>
    <input v-model.trim="bookObj.author" type="text" placeholder="作者"><br>
    <input v-model.trim="bookObj.publisher" type="text" placeholder="出版社"><br>
    <button @click="addBook">发布</button>
  </div>
</template>

<script>
// 下载 yarn add axios
// 引入 axios 到当前组件中
import axios from "axios";
// 给 axios 添加默认请求基地址
axios.defaults.baseURL = 'http://123.57.109.30:3006'
export default {
  data () {
    return {
      bookname:'',
      // 用于实现添加的图书对象
      bookObj:{
        bookname:'',
        author:'',
        publisher:'',
      }
    }
  },
  methods: {
    getAjax() {
      // 通过 axios 发送请求

      // axios() 调用后，会返回一个对象(Promise)
      const p1 = axios({
        method: "get",
        url: "/api/getbooks",
      })

      // Promise 的原型上有 3 个方法
      //    .then()       成功
      //    .catch()      失败
      //    .finally()    完成
      console.log(p1);

      // 请求成功的回调函数写到  .then() 结构中
      p1.then((res) => {
        console.log(res);
      });
    },
    getBook(){
      axios({
        method: "get",
        url: "/api/getbooks",
        // 💥 注意：axios 常通过 params 传递 GET 请求参数，最终拼接到 url?后面
        params:{
          bookname: this.bookname
        }
      }).then(res=>{
        console.log(res);
      })
    },
    // 添加图书
    addBook(){
      axios({
        // 请求方式
        method: 'post',
        // 请求地址
        url:'/api/addbook',
        // POST的请求参数
        data: {
          appkey:  '7250d3eb-18e1-41bc-8bb2-11483665535a',
          // ES6 展开运算符
          ...this.bookObj,
          // 等价于以下3行代码
          // bookname: this.bookObj.bookname,
          // author: this.bookObj.author,
          // publisher: this.bookObj.publisher,
        }
      }).then(res=>{
        console.log(res);
      })

    }
  },
};
</script>

<style>
</style>